<template>
  <div
    class="volvo-avatar"
    :class="[
      `volvo-avatar--${shape}`,
      `volvo-avatar--${size}`
    ]"
  >
    <img
      v-if="src"
      :src="src"
      :alt="alt"
      class="volvo-avatar__img"
      @error="handleError"
    >
    <span v-else-if="text" class="volvo-avatar__text">{{ text }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 头像形状：circle-圆形，square-方形
  shape: {
    type: String,
    default: 'circle',
    validator: (value) => ['circle', 'square'].includes(value)
  },
  // 头像尺寸：mini-迷你，small-小，medium-中，large-大，xlarge-特大
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['mini', 'small', 'medium', 'large', 'xlarge'].includes(value)
  },
  // 图片地址
  src: {
    type: String,
    default: ''
  },
  // 图片加载失败时的替代文本
  alt: {
    type: String,
    default: ''
  },
  // 当图片加载失败时显示的文字
  text: {
    type: String,
    default: ''
  },
  // 背景颜色
  bgColor: {
    type: String,
    default: '#ccc'
  }
});

// 计算文字大小，根据不同尺寸设置不同的字号
const fontSize = computed(() => {
  const sizeMap = {
    mini: 0.75,
    small: 0.875,
    medium: 1,
    large: 1.125,
    xlarge: 1.25
  };
  return sizeMap[props.size];
});

// 图片加载失败处理
const handleError = (e) => {
  console.warn('Avatar image load failed:', e);
};
</script>

<style lang="scss" scoped>
.volvo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  background-color: v-bind(bgColor);
  font-size: v-bind(fontSize) + 'rem';

  &--circle {
    border-radius: 50%;
  }

  &--square {
    border-radius: 0.5rem;
  }

  // 尺寸变体
  &--mini {
    width: 1.5rem;
    height: 1.5rem;
  }

  &--small {
    width: 2rem;
    height: 2rem;
  }

  &--medium {
    width: 2.25rem;
    height: 2.25rem;
  }

  &--large {
    width: 2.5rem;
    height: 2.5rem;
  }

  &--xlarge {
    width: 3rem;
    height: 3rem;
  }

  &__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__text {
    line-height: 1;
  }
}
</style>

<style lang="scss" scoped>
.volvo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  background-color: v-bind(bgColor);
  font-size: v-bind(fontSize) + 'rem';

  &--circle {
    border-radius: 50%;
  }

  &--square {
    border-radius: 8px;
  }

  // 尺寸变体
  &--mini {
    width: 1.5rem;
    height: 1.5rem;
  }

  &--small {
    width: 2rem;
    height: 2rem;
  }

  &--medium {
    width: 2.25rem;
    height: 2.25rem;
  }

  &--large {
    width: 2.5rem;
    height: 2.5rem;
  }

  &--xlarge {
    width: 3rem;
    height: 3rem;
  }

  &__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__text {
    line-height: 1;
  }
}
</style>
